<template>
  <div class="search-layer">
    <div class="search-layer-form">
      <div class="w100">
        <el-select v-model="searchData.locateItem" placeholder="图层类型" size="mini" @change="changeChildData">
          <el-option v-for="m in locateItems" :label="m.NAME" :value="m.C_WEB_SEARCHSET_ID" :key="m.C_WEB_SEARCHSET_ID" />
        </el-select>
      </div>
      <div v-if="locateItemsTwo.length > 0">
        <el-select v-model="searchData.locatepId" placeholder="二级分类" size="mini" @change="changeClassData">
          <el-option v-for="m in locateItemsTwo" :label="m.CLASSCNAME" :value="m.SORTED" :key="m.SORTED" />
        </el-select>
      </div>
      <div v-if="locateItemsThree.length > 0">
        <el-select v-model="searchData.locateId" placeholder="查询字段" size="mini">
          <el-option v-for="m in locateItemsThree" :label="m.FIELDCNAME" :value="m.C_SYS_LOCATE_ID" :key="m.C_SYS_LOCATE_ID" />
        </el-select>
      </div>
      <div class="w100">
        <el-input v-model="searchData.key" placeholder="请输入查询名称" size="mini" />
      </div>
      <div class="w100">
        <el-button @click="doSearch" size="mini">查询</el-button>
      </div>
    </div>
    <div class="search-layer-table" v-loading="doSearchIng">
      <el-table size="mini" :data="tableData" style="width: 100%" height="230" @row-click="rowClick" highlight-current-row>
        <el-table-column prop="name" label="名称" show-overflow-tooltip />
        <el-table-column prop="code" label="编号" show-overflow-tooltip />
      </el-table>
      <el-pagination small layout="prev, pager, next" :pager-count="5" :total="total" :current-page.sync="searchData.pageIndex" @current-change="doSearch" />
    </div>
  </div>
</template>

<script>
import L from '@/libs/leaflet'
import { get, cloneDeep, isEmpty, isArray } from 'lodash'
import { sessionStorage } from '@/deps/utils'
import { designmapMenuApi, designmapChildMenuApi, getSearchApi } from '../../../deps/api'
import { mapObj, featureService } from '@/widgets/mapUtils'
export default {
  async mounted() {
    const data = {
      userName: get(sessionStorage('userData'), 'userName', ''),
      menuId: 680
    }
    const res = await designmapMenuApi(data)
    this.locateItems = res
  },
  data() {
    return {
      searchData: {
        userName: get(sessionStorage('userData'), 'userName', ''),
        locateItem: '',
        locateId: '',
        pageSize: 10,
        pageIndex: 1,
        key: ''
      },
      locateItems: [],
      tableData: [],
      locateItemsTwo: [],
      locateItemsThree: [],
      doSearchIng: false,
      total: 0
    }
  },
  methods: {
    doSearch() {
      if (!this.searchData.locateItem) {
        this.$message.warning('请选择图层类型')
        return
      }
      if (this.locateItemsTwo.length > 0 && !this.searchData.locateId) {
        this.$message.warning('请选择查询字段')
        return
      }
      if (!this.searchData.key) {
        this.$message.warning('请输入查询内容')
        return
      }
      if (this.doSearchIng) return
      this.doSearchIng = true
      getSearchApi(this.searchData).then(res => {
        this.doSearchIng = false
        console.error(res)
        this.tableData = get(res, 'entities[0].dataLs', [])
        this.total = get(res, 'totalRecord', 0)
      })
    },
    async changeChildData() {
      this.searchData.locateId = ''
      this.searchData.locatepId = ''
      this.locateItemsTwo = []
      this.locateItemsThree = []
      this.tableData = []
      const res = await designmapChildMenuApi({ searchSetId: this.searchData.locateItem })
      if (isEmpty(res)) return
      const p = []
      const c = []
      res.forEach(m => {
        if (isArray(m)) {
          p[p.length - 1].children = m
        } else {
          p.push({
            ...m,
            children: []
          })
        }
      })
      console.error(p)
      this.locateItemsTwo = p
      this.searchData.locatepId = this.locateItemsTwo[0].SORTED
      this.locateItemsThree = this.locateItemsTwo[0].children
      this.searchData.locateId = this.locateItemsTwo[0].children[0].C_SYS_LOCATE_ID
    },
    changeClassData() {
      this.searchData.locateId = ''
      const nowP = this.locateItemsTwo.find(i => this.searchData.locatepId === i.SORTED)
      this.locateItemsThree = nowP.children
      this.searchData.locateId = this.locateItemsThree[0].C_SYS_LOCATE_ID
    },
    async rowClick(row) {
      console.error(row)
      const getParams = ({ layername, attributeFilter }) => {
        const p = {
          datasetNames: [`capture:${layername}`],
          spatialQueryMode: 'INTERSECT',
          fromIndex: 0,
          toIndex: 1000
        }
        p.queryParameter = { attributeFilter }
        var boundsParam = new SuperMap.GetFeaturesBySQLParameters(p)
        return boundsParam
      }
      let layerInfo = await new Promise(resolve => {
        featureService.getFeaturesBySQL(getParams({ layername: row.layername, attributeFilter: `SMID IN (${row.smid})` }), serviceResult => {
          resolve(serviceResult.result)
        })
      })
      const nowP = this.locateItems.find(m => m.C_WEB_SEARCHSET_ID === this.searchData.locateItem)
      console.error(nowP)
      layerData = get(layerInfo, 'features.features[0]', [])
      // this.highlightLayerAction(linesInfo, mapObj)
      layerData.properties.LAYERNAME = row.layername
      layerData.properties.FEATURENAME = nowP.NAME
      layerData.properties.fromSearch = true
      this.$bus.$emit('CHANGE_LAYER_INFO', layerData)
      console.error(layerData)
      const point = get(layerData, 'geometry.coordinates', '')
      point && mapObj.flyTo(L.latLng(point[1], point[0]), mapObj.getZoom())
    }
  }
}
</script>
<style lang="scss">
.search-layer {
  overflow: hidden;
  .search-layer-form {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 12px 0;
    & > div {
      margin-top: 12px;
      width: calc(50% - 4px);
      &.w100 {
        width: 100%;
      }
      .el-button,
      .el-input,
      .el-select {
        width: 100%;
      }
    }
  }
  .search-layer-table {
    margin-top: 16px;
  }
  .el-pagination {
    padding: 0;
  }
}
</style>
